<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的外出</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">


    <style>
        .el-pagination {

            margin-top: 15px;
            margin-left: 36%;
        }

    </style>
</head>
<body>

<div id="app">

    <el-row type="flex" justify="center">

        <el-col :span="22">

            <el-table :data="tableData" style="width: 100%" v-loading="loading" >

                <el-table-column
                        label="姓名"
                        prop="userName"
                        column-key="name"
                        width="100px"
                >

                </el-table-column>

                <el-table-column
                        label="起始时间"
                        prop="startTime"
                        column-key="startTime"
                        width="200px"
                >

                </el-table-column>
                <el-table-column
                        label="结束时间"
                        prop="endTime"
                        width="200px"
                >

                </el-table-column>

                <el-table-column
                        label="时长"
                        prop="duration"
                        width="100px">

                </el-table-column>

                <el-table-column
                        label="申请时间"
                        prop="creatTime"
                        width="200px"
                        sortable
                ></el-table-column>

                <el-table-column
                        label="申请内容"
                        prop="applyDesc"
                        width="100px"

                >
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">

                            <p>
                                <el-tag >
                                    <i class="fa fa-user-md"></i>
                                    <span>姓名</span>
                                </el-tag>
                                {{ scope.row.userName }}
                            </p>

                            <p>
                                <el-tag>
                                    <i class="fa fa-commenting-o"></i>
                                    <span>备注</span>
                                </el-tag>
                                {{ scope.row.applyDesc }}
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" type="info">备注详情</el-tag>
                            </div>
                        </el-popover>
                    </template>

                </el-table-column>

                <el-table-column
                        label="审核人"
                        prop="reviewerName"
                        width="100px"
                ></el-table-column>

                <el-table-column
                        label="状态"
                        prop="reviewStatus"
                        sortable
                >

                    <template slot-scope="scope">

                        <el-tag v-if="scope.row.reviewStatus === '审核中'" type="warning">

                            <i class="fa fa-spinner fa-spin"></i> {{ scope.row.reviewStatus }}
                        </el-tag>

                        <el-tag v-if="scope.row.reviewStatus === '已通过'" type="success">

                            <i class="el-icon-success"></i> {{ scope.row.reviewStatus }}
                        </el-tag>

                        <el-tag v-if="scope.row.reviewStatus === '未通过'" type="danger">

                            <i class="el-icon-error"></i> {{ scope.row.reviewStatus }}
                        </el-tag>

                    </template>
                </el-table-column>

            </el-table>

            <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :total=page.total
                    :current-page=page.current
                    :page-size=page.size
                    @current-change="handleCurrentChange"
            >
            </el-pagination>

        </el-col>


    </el-row>

</div>

</body>
</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<script src="../../lib/vue/axios-0.18.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            tableData: [],

            loading: false,

            page: {

                total: 0,
                current: 1,
                size: 0

            }


        },


        methods: {

            //处理点击上/下一页
            handleCurrentChange: function (current) { //val为点击之后的页

                $.ajax({

                    url: '/travel/myapplytravel',
                    data: {'current': current},
                    type: 'get',

                    beforeSend: function () {

                        app.loading = true
                    },
                    success: function (result) {

                        if (result.success === true) {

                            app.tableData = [];
                            let resData = result.data;

                            for (let datas of resData.records) {

                                datas.startTime = formatDate(datas.startTime);
                                datas.endTime = formatDate(datas.endTime);
                                datas.creatTime = formatDate(datas.creatTime);

                                if (datas.reviewStatus === '1') {
                                    datas.reviewStatus = '审核中';
                                } else if (datas.reviewStatus === '2') {
                                    datas.reviewStatus = '已通过';

                                } else if (datas.reviewStatus === '3') {

                                    datas.reviewStatus = '未通过';
                                }

                                app.tableData.push(datas);

                            }

                            app.page.total = resData.total;
                            app.page.current = resData.current;
                            app.page.size = resData.size;

                            app.loading = false

                        } else {

                            app.$notify.warning({
                                title: '警告',
                                message: result.msg

                            })

                        }
                    }

                })


            }


        },

        created: function () {


            $.ajax({

                url: '/travel/myapplytravel',
                data: {'current': 1},
                type: 'get',
                success: function (result) {

                    if (result.success === true) {

                        app.tableData = [];
                        let resData = result.data;

                        for (let datas of resData.records) {

                            datas.startTime = formatDate(datas.startTime);
                            datas.endTime = formatDate(datas.endTime);
                            datas.creatTime = formatDate(datas.creatTime);

                            if (datas.reviewStatus === '1') {
                                datas.reviewStatus = '审核中';
                            } else if (datas.reviewStatus === '2') {
                                datas.reviewStatus = '已通过';

                            } else if (datas.reviewStatus === '3') {

                                datas.reviewStatus = '未通过';
                            }

                            app.tableData.push(datas);

                        }

                        app.page.total = resData.total;
                        app.page.current = resData.current;
                        app.page.size = resData.size;

                        app.loading = false

                    } else {

                        app.$notify.warning({
                            title: '警告',
                            message: result.msg

                        })

                    }
                }

            })


        }


    })


    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formatDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let second = date.getSeconds();
        if (mon < 10) mon = '0' + mon;
        if (day < 10) day = '0' + day;
        return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + second;

    }


</script>